<template>
  <back-dialog-base
    :title="title"
    :visible="flowVisibleDialog"
    :hasFooter="false"
  >
    <template #content>
      <div class="main">
        <div class="police">
          <div class="poli">
            <div class="police-title">
              <div class="police-svg">
                <svg-icon icon="product-alarm"></svg-icon>
              </div>
              <span class="police-fz">报警</span>
            </div>
            <div class="police-main">
              <div class="police-Dot">
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
              </div>
              <div class="police-text">
                <div class="text-time">
                  <span>报警时间：{{ props.rowData.reportTime }} </span>
                </div>
                <div class="text-time">
                  <span>
                    所属管廊：<span style="color: #ffb403">{{
                      props.rowData.pipeName
                    }}</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="analysis-main">
            <div class="police-title">
              <div
                class="police-svg"
                v-if="Object.keys(formInline.analyze).length !== 0"
              >
                <svg-icon icon="product-analyze"></svg-icon>
              </div>
              <div class="police-svg" v-else>
                <svg-icon icon="product-unanalyze"></svg-icon>
              </div>
              <span
                class="police-fz"
                :style="
                  showDiaFlag ? { color: '#1E6AE7' } : { color: '#AEBBD3' }
                "
                >分析</span
              >
            </div>
            <div class="police-main">
              <div
                class="police-Dot"
                v-show="Object.keys(formInline.analyze).length !== 0"
              >
                <div
                  class="police-D"
                  v-show="formInline.analyze.deal_type !== '04'"
                >
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
              </div>
              <div
                class="police-Dot"
                v-show="Object.keys(formInline.analyze).length === 0"
              >
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
              </div>
              <div
                class="police-text"
                v-show="Object.keys(formInline.analyze).length !== 0"
              >
                <div class="text-time">
                  分析时间：{{ formInline.analyze?.created_time || '' }}
                </div>
                <div class="text-time">
                  分析结果：<span style="color: #f82b24">{{
                    formInline.analyze?.deal_status || ''
                  }}</span>
                </div>
                <div class="text-time">
                  处置建议：{{ formInline.analyze?.deal_opinion || '' }}
                </div>
                <div
                  class="text-time"
                  v-show="formInline.analyze.deal_type !== '04'"
                >
                  分析人：{{ formInline.analyze?.deal_user || '' }}
                </div>
              </div>
            </div>
          </div>
          <div
            class="management-main"
            v-show="
              Object.keys(formInline.analyze).length !== 0
            "
          >
            <div class="police-title">
              <div
                class="police-svg"
                v-if="Object.keys(formInline.dealResult).length === 0"
              >
                <svg-icon icon="product-undispose"></svg-icon>
              </div>
              <div class="police-svg" v-else>
                <svg-icon icon="product-dispose"></svg-icon>
              </div>
              <span
                class="police-fz"
                :style="
                  formInline.dealResult
                    ? { color: '#1E6AE7' }
                    : { color: '#AEBBD3' }
                "
                >处置</span
              >
            </div>
            <div class="police-main">
              <div
                class="police-Dot"
                v-show="Object.keys(formInline.dealResult).length !== 0"
              >
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
              </div>
              <div
                class="police-Dot"
                v-show="Object.keys(formInline.dealResult).length === 0"
              >
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
              </div>
              <div
                class="police-text"
                v-show="Object.keys(formInline.dealResult).length !== 0"
              >
                <div class="text-time">
                  处置时间：{{ formInline.dealResult?.created_time || '' }}
                </div>
                <div class="text-time">
                  处置结果：<span style="color: #1e6ae7">{{
                    formInline.dealResult?.deal_opinion
                  }}</span>
                </div>
                <div class="text-time">
                  附件：
                  <svg-icon
                    style="cursor: pointer"
                    icon="photo"
                    @click="tp(formInline.dealResult)"
                  ></svg-icon>
                </div>
                <div class="text-time">
                  处置人：{{ formInline.dealResult?.deal_user || '' }}
                </div>
              </div>
            </div>
          </div>
          <div
            class="Contact-main"
            v-show="
              Object.keys(formInline.dealResult).length !== 0 &&
              Object.keys(formInline.analyze).length !== 0
            "
          >
            <div class="police-title">
              <div
                class="police-svg"
                v-show="Object.keys(formInline.clearAlert).length !== 0"
              >
                <svg-icon icon="alarm-lift"></svg-icon>
              </div>
              <div
                class="police-svg"
                v-show="Object.keys(formInline.clearAlert).length === 0"
              >
                <svg-icon icon="alarm-unlift"></svg-icon>
              </div>
              <span
                class="police-fz"
                :style="
                  formInline.clearAlert
                    ? { color: '#1E6AE7' }
                    : { color: '#AEBBD3' }
                "
                >解除</span
              >
            </div>
            <div class="police-main">
              <div
                class="police-Dot"
                v-show="Object.keys(formInline.clearAlert).length !== 0"
              >
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
                <div class="police-D">
                  <span class="Dot"></span>
                </div>
              </div>
              <div
                class="police-Dot"
                v-show="Object.keys(formInline.clearAlert).length === 0"
              >
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
                <div class="police-D">
                  <span class="Dot2"></span>
                </div>
              </div>
              <div
                class="police-text"
                v-show="Object.keys(formInline.clearAlert).length !== 0"
              >
                <div class="text-time">
                  解除时间：{{ formInline.clearAlert?.created_time || '' }}
                </div>
                <div class="text-time">
                  解除原因：<span style="color: #1e6ae7">{{
                    formInline.clearAlert.deal_opinion || ''
                  }}</span>
                </div>
                <div class="text-time">
                  解除人：{{ formInline.clearAlert.deal_user || '' }}
                </div>
              </div>
            </div>
            <div
              class="police-title"
              v-show="Object.keys(formInline.clearAlert).length !== 0"
            >
              <div class="police-svg">
                <svg-icon icon="product-finish"></svg-icon>
              </div>
              <span class="police-fz">已完成</span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <el-dialog
          v-model="innerVisible"
          width="37%"
          title="处置照片"
          append-to-body
        >
          <div class="im" v-for="item in photoData" :key="item.id">
            <img :src="item.fileUrl" alt="" />
          </div>
        </el-dialog>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { defineProps, ref, watch, reactive } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { problemQuery } from '@/api/monitor'
import { ElMessage } from 'element-plus'
const photoData = ref({})
const listData = ref({})
const showDiaFlag = ref(true)
const flowVisibleDialog = ref(true)
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  flowVisibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  },
  problemNo: {
    type: Object,
    default: () => {}
  },
  id: {
    type: Object,
    default: () => {}
  }
})
const viewData = reactive({
  problemNo: '',
  id: ''
})

const formInline = reactive({
  analyze: {},
  dealResult: {},
  clearAlert: {}
})
const innerVisible = ref(false)

const list = async () => {
  // viewData.problemNo = props.rowData.problemNo
  // viewData.id = props.rowData.id
  // console.log(viewData.problemNo, viewData.id)
  //  let data = {
  //     id: props.rowData.id,
  //     problemNo: props.rowData.problemNo
  //   }
  listData.value = await problemQuery({
    id: props.rowData.id,
    problemNo: props.rowData.problemNo
  })
  console.log(listData.value)
  showDiaFlag.value = true
  console.log(listData.value.analyze)
  formInline.analyze = listData.value.analyze
  formInline.dealResult = listData.value.dealResult
  formInline.clearAlert = listData.value.clearAlert
  if (Object.keys(listData.value.dealResult).length !== 0) {
    photoData.value = listData.value.dealResult.fileInfoMap.fileList
  }
  console.log(listData.value.analyze)
  console.log(photoData.value)
}

const tp = async () => {
  innerVisible.value = true
}
watch(
  () => props.rowData,
  () => {
    list()
    viewData.problemNo = props.rowData.problemNo
  }
)
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  padding: 10px;
  .police {
    width: 100%;
    .police-title {
      position: relative;
      .police-svg {
        display: inline-block;
        width: 44px;
        height: 44px;
        :deep(.svg-icon) {
          width: 100%;
          height: 100%;
        }
      }
      .police-fz {
        position: absolute;
        top: 12px;
        left: 55px;
        color: #1e6ae7;
        font-size: 14px;
      }
    }
    .police-main {
      position: relative;
      width: 100%;
      .police-Dot {
        display: inline-block;
        width: 40px;
        .police-D {
          text-align: center;
          width: 100%;
          height: 26px;
        }
      }
      .police-text {
        display: inline-block;
        width: 450px;
        padding-top: 10px;
        .text-time {
          margin-bottom: 10px;
          color: #5d6c8e;
        }
      }
    }
    .analysis-main {
      width: 100%;
      height: 170px;
    }
    .management-main {
      width: 100%;
      height: 180px;
    }
    .Contact-main {
      width: 100%;
      height: 180px;
    }
  }
}
.Dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #1e6ae7;
  border-radius: 50%;
  opacity: 1;
}
.Dot2 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #aebbd3;
  border-radius: 50%;
  opacity: 1;
}
.poli {
  height: 100%;
}
.main .police .police-main .text {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 0;
  .text-D {
    display: inline-block;
    height: 26px;
    width: 25px;
    margin-left: 18px;
  }
  .police-time {
    position: relative;
    top: 15px;
    margin-bottom: 10px;
    color: #5d6c8e;
  }
}
.text1 {
  margin-left: 40px;
}
.im {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
